import React, { useEffect, useState, useImperativeHandle, forwardRef, useMemo } from 'react'
import { Row, Col, Segmented, Button, Select, Space, Tooltip } from 'antd'
import TableDataBlock from '@/components/TableDataBlock';
import Modal from '@/components/SelectAdmin'
const setAdminList = (props) => {
    const {
        list = [],
        setList,
        initialValues = {}
    } = props
    const { assignAdminNames, assignAdminIds = '' } = initialValues
    useEffect(() => {
        if (assignAdminIds.length > 0) {
            setList(assignAdminIds.split(',').map(item => {
                return {
                    id: item
                }
            }))
        }
        setUsername(assignAdminNames)
    }, [
        initialValues
    ])
    const [username, setUsername] = useState('')
    const [visible, setVisible] = useState(false)
    const getColumns = [
        {
            title: '姓名',
            dataIndex: 'username',
        },
    ]
    const onChange = (e) => {
        setUsername(e.map(item => {
            return item.username
        }).toString())
        setList(e)
    }
    const memo = useMemo(() => {

        return <Row gutter={[12, 24]}>
            <Col style={{ paddingRight: 4 }} span={24}>
                <Space style={{ display: 'flex', alignItems: 'flex-start' }}>
                    <div>绑定员工选择:</div>
                    <div style={{ width: 600 }}>
                        <Button onClick={() => {
                            setVisible({
                                show: true,
                                title: '绑定员工选择',
                                detail: {
                                    list: list,
                                }
                            })
                        }}>设置</Button>
                        <div style={{ marginTop: 12 }}>
                            <Tooltip title={username}>
                                <div className='font_hide' style={{ border: '1px solid #e6e6e6', width: 280, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0px 24px' }}>
                                    {username}
                                </div>
                            </Tooltip>

                        </div>
                    </div>
                </Space>
            </Col>
            <Modal onChange={(e) => onChange(e)} visible={visible} onClose={() => {
                setVisible(false)
            }}></Modal>
        </Row>


    }, [list, visible])
    return memo

}
export default forwardRef(setAdminList) 